<template>
  <div class="worker-manage">
    <div class="header">
      <h2>维修工管理</h2>
      <button @click="showAddDialog = true">添加维修工</button>
    </div>

    <table>
      <thead>
        <tr>
          <th>维修工号</th>
          <th>姓名</th>
          <th>手机号</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="worker in workerList" :key="worker.维修工号">
          <td>{{ worker.维修工号 }}</td>
          <td>{{ worker.维修工姓名 }}</td>
          <td>{{ worker.维修工手机号 }}</td>
          <td>{{ worker.维修工状态 }}</td>
          <td>
            <button class="edit-btn" @click="handleEdit(worker)">编辑</button>
            <button class="delete-btn" @click="handleDelete(worker.维修工号)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 添加维修工对话框 -->
    <div v-if="showAddDialog" class="dialog-overlay">
      <div class="dialog">
        <h3>添加维修工</h3>
        <form @submit.prevent="handleAdd">
          <div class="form-item">
            <label>姓名：</label>
            <input type="text" v-model="formData.WorkerName" required>
          </div>
          <div class="form-item">
            <label>手机号：</label>
            <input type="tel" v-model="formData.WorkerPhone" required>
          </div>
          <div class="form-item">
            <label>账号：</label>
            <input type="text" v-model="formData.WorkerAccount" required>
          </div>
          <div class="form-item">
            <label>密码：</label>
            <input type="password" v-model="formData.WorkerPassword" required>
          </div>
          <div class="dialog-actions">
            <button type="submit">确定</button>
            <button type="button" @click="showAddDialog = false">取消</button>
          </div>
        </form>
      </div>
    </div>

    <!-- 编辑维修工对话框 -->
    <div v-if="showEditDialog" class="dialog-overlay">
      <div class="dialog">
        <h3>编辑维修工</h3>
        <form @submit.prevent="handleUpdate">
          <div class="form-item">
            <label>姓名：</label>
            <input type="text" v-model="formData.WorkerName" required>
          </div>
          <div class="form-item">
            <label>手机号：</label>
            <input type="tel" v-model="formData.WorkerPhone" required>
          </div>
          <div class="form-item">
            <label>账号：</label>
            <input type="text" v-model="formData.WorkerAccount">
          </div>
          <div class="form-item">
            <label>密码：</label>
            <input type="password" v-model="formData.WorkerPassword" placeholder="不修改请留空">
          </div>
          <div class="dialog-actions">
            <button type="submit">确定</button>
            <button type="button" @click="showEditDialog = false">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { getWorkerList, addWorker, updateWorker, deleteWorker } from '@/api/worker'

interface Worker {
  维修工号: number
  维修工姓名: string
  维修工手机号: string
  维修工状态: string
}

const workerList = ref<Worker[]>([])
const showAddDialog = ref(false)
const showEditDialog = ref(false)
const formData = ref({
  WorkerId: '',
  WorkerName: '',
  WorkerPhone: '',
  WorkerAccount: '',
  WorkerPassword: ''
})

// 初始化表单数据
const initFormData = () => {
  formData.value = {
    WorkerId: '',
    WorkerName: '',
    WorkerPhone: '',
    WorkerAccount: '',
    WorkerPassword: ''
  }
}

// 监听对话框状态
watch(showAddDialog, (newVal) => {
  if (newVal) {
    // 打开对话框时初始化表单
    initFormData()
  }
})

watch(showEditDialog, (newVal) => {
  if (!newVal) {
    // 关闭对话框时初始化表单
    initFormData()
  }
})

// 获取维修工列表
const fetchWorkerList = async () => {
  try {
    const res = await getWorkerList()
    console.log('维修工列表响应:', res)
    if (res.code === 200) {
      workerList.value = res.data
    } else {
      throw new Error(res.message || '获取列表失败')
    }
  } catch (error: any) {
    console.error('获取列表错误:', error)
    alert(error.message)
  }
}

// 添加维修工
const handleAdd = async () => {
  try {
    const res = await addWorker(formData.value)
    if (res.code === 200) {
      showAddDialog.value = false
      // 清空表单
      initFormData()
      await fetchWorkerList()
      alert('添加成功')
    } else {
      throw new Error(res.message || '添加失败')
    }
  } catch (error: any) {
    console.error('添加错误:', error)
    alert(error.message)
  }
}

// 编辑维修工
const handleEdit = (worker: Worker) => {
  formData.value = {
    WorkerId: String(worker.维修工号),
    WorkerName: worker.维修工姓名,
    WorkerPhone: worker.维修工手机号,
    WorkerAccount: '',  // 不显示原账号
    WorkerPassword: ''  // 不显示原密码
  }
  showEditDialog.value = true
}

// 更新维修工
const handleUpdate = async () => {
  try {
    const res = await updateWorker(formData.value)
    if (res.code === 200) {
      showEditDialog.value = false
      // 清空表单
      initFormData()
      await fetchWorkerList()
      alert('更新成功')
    } else {
      throw new Error(res.message || '更新失败')
    }
  } catch (error: any) {
    console.error('更新错误:', error)
    alert(error.message)
  }
}

// 删除维修工
const handleDelete = async (WorkerId: number) => {
  if (!confirm('确定要删除该维修工吗？')) return
  try {
    const res = await deleteWorker(String(WorkerId))
    if (res.code === 200) {
      // 直接从本地列表中移除该维修工
      workerList.value = workerList.value.filter(worker => worker.维修工号 !== WorkerId)
      alert('删除成功')
    } else {
      throw new Error(res.message || '删除失败')
    }
  } catch (error: any) {
    console.error('删除错误:', error)
    alert(error.message)
    // 如果删除失败，重新获取列表
    await fetchWorkerList()
  }
}

onMounted(() => {
  fetchWorkerList()
})
</script>

<style scoped>
.worker-manage {
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

h2 {
  margin: 0;
  color: #333;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

th {
  background-color: #fafafa;
  font-weight: 500;
  color: #666;
}

.edit-btn, .delete-btn {
  padding: 4px 8px;
  margin-right: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.edit-btn {
  background-color: #409eff;
  color: white;
}

.delete-btn {
  background-color: #f56c6c;
  color: white;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
}

.form-item {
  margin-bottom: 15px;
}

.form-item label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

.form-item input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #409eff;
  color: white;
}

button[type="button"] {
  background-color: #909399;
}

button:hover {
  opacity: 0.9;
}
</style> 